<template>
  <div class="my-renter actWrap">
    <!-- <div>
      <tab>
        <tab-item selected @on-item-click="onItemClick">交租情况</tab-item>
        <tab-item @on-item-click="onItemClick">合约状态</tab-item>
      </tab>
    </div> -->
    <div class="renter-list" v-if="renterList.length > 0">
      <div class="renter-list-item" v-for="(item, index) in renterList" :key="index">
        <div class="renter-img"><img width="100%" :src="require('../../../images/avatar_default.png')" alt=""></div>
        <div class="renter-msg">
          <div><span class="color-999">租客：</span>{{item.webUser && item.webUser.trueName}} <span class="ly">{{statu2txt (item.status)}}</span></div>
          <!--<div><span class="color-999">电话：</span><a :href="'tel:' + item.webUser && item.webUser.mobilePhone">{{ item.webUser && `${item.webUser.mobile.substr(0, 3)}****${item.webUser.mobile.substr(-4)}` }}</a></div>-->
          <div><span class="color-999">签约时间：</span>{{item.createTime | IOSformatDate}}</div>
          <div><span class="color-999">租赁日期：</span>{{item.beginTime | IOSformatDate}} - {{item.endTime | IOSformatDate}}</div>
        </div>
        <div class="housing">
          <div class="housing-d">
            <div class="housing-ft"><img :src="item.housePerson.coverImg"  alt=""></div>
            <div class="housing-rt">
              <p class="housing-rt-title">{{item.housePerson.houseTitle}}</p>
              <div class="housing-rt-tex">
                <div>{{item.housePerson.layoutRoom}}室{{item.housePerson.layoutHall}}厅</div>
                <div>{{item.housePerson.communityName.substr(0, 5)}}</div>
                <div>{{item.housePerson.outManner}}</div>
              </div>
              <div class="price">￥{{item.housePerson.rentalPrice}} <span>/元/月</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <no-data v-else><span slot="message">您还没有租客信息哦~</span></no-data>
  </div>
</template>
<script>
  import noData from '@/components/noData'
  export default {
    components: {
      noData
    },
    data () {
      return {
        renterList: []
      }
    },
    created () {
      this.getData()
    },
    methods: {
      getData () {
        this.$axiosGeting(this.$api.myRenters, {}).then(json => {
          if (json.code === '0000' && json.data && json.data.length > 0) {
            this.renterList = json.data
          }
        })
      },
      statu2txt (i) {
        let txt = ''
        i = +i
        if (i === 1) txt = '待租客签约'
        else if (i === 2) txt = '合同生效'
        else if (i === 3) txt = '合同解除'
        else if (i === 4) txt = '合同续约中'
        else if (i === 5) txt = '退租'
        return txt
      },
      onItemClick: function (index) {
      }
    }
  }
</script>
<style lang="less">
  .my-renter{
    .renter-list{
      font-size: .8rem;
      .tips {
        font-size: 15px;
        line-height: 2rem;
        color: #999;
        text-align: center;
      }
      .renter-list-item{
        display: block;
        align-items: center;
        /*border-bottom: 1px solid #ccc;*/
        /*height: 100px;*/
        .renter-img{
          width: 2.1rem;
          /*padding:.5rem 0;*/
          margin-left: 0.5rem;
          float: left;
          img{
            border-radius: 50%;
            width: 2.1rem;
            height: 2.1rem;
            position: relative;
            top: 1rem;
          }
        }
        .renter-msg{
          padding:.5rem;
          display: flex;
          flex-wrap: wrap;
          font-size: 0.6rem;
          color: black;
          div{
            padding-right: .5rem;
            line-height: 1rem;
            width:100%;
          }
          .ly {
            float: right;
            color: #ff9600;
            border:1px solid #ff9600;
            padding: 0 0.6rem;
            border-radius: 0.5rem;
            font-size: 0.5rem;
          }
          a{
            // color:green;
            color: black;
          }
        }
        .color-999 {
          color: #000;
        }
      }
    }
  }
</style>
<style lang="less">
  .housing{
    padding: 0.5rem;
    background-color: #f4f4f4;
    .housing-d{
      position: relative;
      .housing-ft{
        position: absolute;
        top: 0;
        left: 0;
        width: 6.65rem;
        height: 4.25rem;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .housing-rt{
        width: 100%;
        height: 4.25rem;
        padding-left: 7rem;
        box-sizing: border-box;
        .housing-rt-title{
          font-size: .75rem;
          color: #000;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          overflow: hidden;
          height: auto;
          -webkit-line-break: auto;
          -webkit-box-orient: vertical;
          line-height: 1.3;
        }
        .housing-rt-tex{
          display: flex;
          font-size: 0.6rem;
          color: #999;
          margin-top: 0.15rem;
          div{
            display: flex;
            margin-right: 0.5rem;
          }
        }
        .price{
          font-size: 1.2rem;
          color: #ff3c00;
          line-height: 1; 
          position: absolute;
          bottom: 0;
          span{
            font-size: 0.6rem;
            color: #999;
          }
        }
      }
    }
  }
</style>
